<template>
  <div>
    <!-- <h1>你好脚手架</h1> -->
    <!-- 放根目录下面 -->
    <!-- 组件名称 Container -->
    <el-container>
      <el-header>ElementUI.vue</el-header>
      <el-main>Main 主体体体体体

        <!-- 组件名称 Table -->
        <el-table :data="userList" style="width: 100%">
          <el-table-column prop="id" label="编号" width="50">
          </el-table-column>
          <el-table-column prop="username" label="姓名" width="100">
          </el-table-column>
          <el-table-column prop="password" label="密码">
          </el-table-column>
          <el-table-column prop="phone" label="手机" width="150">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="180">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="70">
          </el-table-column>
          <el-table-column prop="created" label="创建时间">
          </el-table-column>
          <el-table-column prop="updated" label="更新时间">
          </el-table-column>
        </el-table>

      </el-main>
    </el-container>
    <hr />

    <el-container>
      <el-header>header2</el-header>

      <el-main>main2
        <!-- 组件名称 Button -->

        <el-row>
          <el-button>默认按钮</el-button>
          <el-button type="primary">主要按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="info">信息按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
        </el-row>

        <!-- 组件名称 DataPicker 先在文件element.js中添加该组件 -->
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-main>
      <!-- <el-footer>
        footer


      </el-footer> -->
    </el-container>



    <hr />

    <el-container>
      <el-header></el-header>
      
    </el-container>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        userList: [],
        value1: ''
      }
    },
    methods: {
      async getAll() {
        let {
          data: val
        } = await this.$http.get(`/user/hello`)
        this.userList = val
      }
    },
    mounted() {
      this.getAll()
    }
  }
</script>

<style>
  /* 自己的内容 */

  /* 复制的内容 */
  /* container */
  .el-header,
  .el-footer {
    /* 去掉. */
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }


  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /* button */
  /* datepicker */
</style>
